import React, { useEffect, useState } from 'react'
import { getProList, getCategory, searchPro } from '../../api/pro'
import { Table, Tag, Image, Switch, Select, Input, Button } from 'antd'
export default function Index() {

    const [proList, setProList] = useState([])
    const [category, setCategory] = useState([])

    useEffect(() => {
        getProList().then(res => {
            // console.log(res);
            setProList(res.data)
        })

        getCategory().then(res => {
            // console.log(res.data);
            const arr = []
            res.data.forEach(item => {
                arr.push({
                    text: item,
                    value: item,
                })
            })
            setCategory(arr)
        })
    }, [])

    const [current, setCurrent] = useState(1)

    const columns = [
        {
            title: '序号',
            render(t, r, i) {
                return <Tag>{(current - 1) * 10 + i + 1}</Tag>
            }
        }, {
            title: '商品名称',
            dataIndex: 'proname',
            width: 300
        }, {
            title: '商品图片',
            dataIndex: 'img1',
            render(t) {
                return <Image style={{ width: 80 }} src={t} />
            }
        }, {
            title: '商品分类',
            dataIndex: 'category',
            filters: category, // 所有的类别数据
            onFilter: (value, record) => record.category.indexOf(value) === 0, // 筛选条件
        }, {
            title: '商品价格',
            dataIndex: 'originprice',
            sorter: (a, b) => a.originprice - b.originprice,
        }, {
            title: '商品折扣',
            dataIndex: 'discount',
            sorter: (a, b) => a.discount - b.discount,
        }, {
            title: '是否推荐',
            dataIndex: 'isrecommend',
            render(t) {
                return <Switch defaultChecked={t} />
            }
        }, {
            title: '是否售卖',
            dataIndex: 'issale',
            render(t, r) {
                return <Switch defaultChecked={t} />
            }
        }, {
            title: '是否秒杀',
            dataIndex: 'isseckill',
            render(t, r) {
                return <Switch defaultChecked={t} />
            }
        }
    ]

    // 搜索模块
    const [searchCategory, setSearchCategory] = useState(undefined)
    const [searchText, setSearchText] = useState('')
    const searchClick = () => {
        // console.log(searchCategory, searchText);
        searchPro({
            category: searchCategory,
            search: searchText
        }).then(res => {
            setProList(res.data)
        })
    }

    return (
        <div>
            <div style={{ display: 'flex' }}>
                <h2>商品列表</h2>
                <Select placeholder='请选择' value={searchCategory} onChange={e => { setSearchCategory(e) }} options={category} style={{ width: 350 }}></Select>
                <Input value={searchText} onChange={e => { setSearchText(e.target.value) }} style={{ width: 350 }} placeholder='请输入商品名称' />
                <Button onClick={searchClick}>搜索</Button>
            </div>

            <Table
                locale={{
                    triggerDesc: '点击降序',
                    triggerAsc: '点击升序',
                    cancelSort: '取消排序',
                    filterConfirm: '确定',
                    filterReset: '重置',
                }}
                scroll={{ y: 500 }}
                pagination={{
                    current,
                    onChange(page) {
                        setCurrent(page)
                    }
                }}
                rowKey={'proid'}
                dataSource={proList}
                columns={columns} />

        </div>
    )
}
